<template>
  <view class="remark-form">
    <cell label="请输入备注" v-if="!isTrue(flatMapFlag)" :required="isTrue(authRemark)"
      :placeholder="placeholderByRemarkIsHasVal" :border="false" @click="openPopup" />
    <cell :arrow="false" v-else :required="isTrue(authRemark)" v-for="(item,i) in list" :key="i"
      :label="item.remarkPromt" :cellContentHeight="'20px'" :border="i < list.length - 1">
      <input class="amount-ipt" :placeholder="item.remarkPromt" placeholder-class="placeholder-class"
        v-model.trim="item.content" type="text" :always-system="true" @input="changeList(i,$event)"
        :disabled="outNumber.length > 0 && i === 0" />
    </cell>
    <uni-popup ref="remarkpopup" v-if="!isTrue(flatMapFlag)" @change="popupChange" type="dialog" :mask-click="false"
      :is-mask-click="false">
      <view class="popup-form">
        <view class="popup-title">请输入备注</view>
        <cell :arrow="false" :required="isTrue(authRemark)" v-for="(item,i) in list" :key="i" :isLabel="false"
          :label="item.remarkPromt" :border="i < list.length - 1">
          <input class="amount-ipt" :placeholder="item.remarkPromt" placeholder-class="placeholder-class"
            v-model.trim="item.content" @input="changeList(i,$event)" type="text" :always-system="true"
            :disabled="outNumber.length > 0 && i === 0" />
        </cell>
        <view class="flexbox">
          <button class="confirm-btn popup-title" @click="closePopup">取消</button>
          <button class="confirm-btn popup-title" style="color: #ff8400;border-left: 1rpx solid #ebedf0;"
            @click="confirmRemark">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import Cell from './Cell.vue';
  import {
    debounce,
    isEmpty
  } from "@/common/util.js";
  export default {
    props: {
      // 备注是否必填 1 是 2 不是
      authRemark: {
        type: String,
        default: '2'
      },
      // 是否弹窗显示备注 0 是 1 不是
      flatMapFlag: {
        type: String,
        default: '0'
      },
      // 如果链接携带订单号并且开启备注功能，则备注第一条不能输入，订单号返显在第一条备注
      outNumber: {
        type: String,
        default: '0'
      },
      promptList: {
        type: Array,
        default: () => []
      }
    },
    watch: {
      promptList: {
        handler(newVal) {
          this.list = JSON.parse(JSON.stringify(newVal))
        },
        deep: true,
        immediate: true
      }
    },
    components: {
      Cell
    },
    computed: {
      placeholderByRemarkIsHasVal() {
        let placeholder = "点击输入";
        if (!isEmpty(this.list) && this.list.some(item => !isEmpty(item.content))) {
          placeholder = '点击修改'
        }
        return placeholder
      }
    },
    data() {
      return {
        list: []
      };
    },
    methods: {
      isTrue(val, val1 = '1') {
        return `${val}` == val1
      },
      changeList(i, e) {
        // this.$set(this.list[i], 'content', e.detail.value)
        // console.log(i, this.list[i].content)
      },
      popupChange(e) {
        this.$emit('popupChange', e)
      },
      openPopup(e) {
        this.$refs.remarkpopup.open()
      },
      closePopup() {
        this.$refs.remarkpopup.close()
      },
      validateForm() {
        let resFlag = true;
        if (this.isTrue(this.authRemark)) {
          for (let i = 0; i < this.list.length; i++) {
            let current = this.list[i]
            console.log(i, current)
            if (isEmpty(current.content)) {
              this.$toast(`请输入备注"${current.remarkPromt}"`)
              resFlag = false
              break
            } else {
              let f = current.content.length <= current.remarkMinLimit
              if (f) {
                this.$toast(`备注"${current.remarkPromt}"长度须大于${current.remarkMinLimit}个字`)
                resFlag = false
                break
              }
            }
          }
        }
        return resFlag ? this.list : resFlag
      },
      confirmRemark() {
        let r = this.validateForm();
        if (!r) return
        this.closePopup()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .remark-form {
    .flexbox {
      display: flex;
      align-items: center;
    }
  }

  .popup-form {
    background-color: #fff;
    width: 660rpx;
    border-radius: 30rpx;
    overflow: hidden;

    .flexbox {
      border-top: 1rpx solid #ebedf0;
    }

    .popup-title {
      line-height: 40px;
      height: 40px;
      font-size: 15px;
      font-weight: 700;
      color: #333;
      text-align: center;
    }

    .confirm-btn {
      flex: 1;
      border-radius: 0;
      background-color: #fff;

      &:active {
        background-color: #f2f3f5;
      }
    }
  }

  .amount-ipt {
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    width: 100%;
  }

  .placeholder-class {
    font-size: 14px;
    color: #969799;
  }
</style>